<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        background-color: #333;
      }
    </style>
  </head>
  <body>
    <script>
      /* 
         new > bind  > call | apply > 隐式绑定
      */
      function foo() {
        console.log('foo', this);
      }

      const obj = {
        foo,
        bar() {
          console.log('bar:', this);
          console.log('bar:', this === obj);
        },
      };

      // apply > 隐式绑定
      obj.foo.apply(123);

      // bind > 隐式绑定
      const bar = foo.bind(123);

      // new绑定优先级高于隐式绑定
      new obj.foo();

      // new 不能和 apply/call 一起使用
      // new > bind
      const bindFn = foo.bind('hello');
      new bindFn();

      // bind > apply
      const bindFn2 = foo.bind('hello');
      bindFn2.apply('world');
    </script>
  </body>
</html>
